<template>
    <div class='list'>
          <div
        class="mylist"
        v-for="(item, index) in songs"
        :key="item._id"
      >
        <div class="mylistleft" @click="xiangq(item.id)">
          <span class="index">{{ index + 1 }}.</span>
          <img :src="item.al.picUrl" alt="" />
          <div class="lmylist">
            <p>{{ item.name }}</p>
          </div>
          </div>
        </div>
    </div>
</template>

<script>
import {playlistid,playlistxq} from "../../../api/mine"
export default {
    
    data() {
        
        return {
            trackIds:[],
            songs:[]
        };
    },
    computed: {},
    watch: {},
    
    methods: {


        
       async playlistid(id){
            const result=await playlistid(id)
            console.log(result);
            this.trackIds=result.data.playlist.trackIds
            console.log(  this.trackIds);
             
            
            
        },
   
      async playlistxq(id){
            const result=await playlistxq(id)
            console.log(result);
            this.songs=result.data.songs
            console.log( this.songs);
           
            
        }, 
        xiangq(id){
          location.href=`#/songdetail/${id}`
        }
    },
    created() {
       const id= this.$route.params.id
       this.playlistid(id)
       this.playlistxq(id)
    },
    mounted() {
        
    },
    components: {},
    }
</script>
<style scoped>
    .mylist {
  padding: 10px;
  background-color: white;
  overflow: hidden;
}
.index {
  width: 20px;
  height: 26px;
  float: left;
  padding: 12px 0;
}
.mylistleft {
  float: left;
}
.mylistleft img {
  float: left;
  width: 50px;
  height: 50px;
  margin-left: 20px;
}
.mylistleft .lmylist {
  float: left;
}
.mylistleft .lmylist p {
  width: 230px;
  line-height: 30px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap;
  margin: 0 5px;
}
.mylistleft .lmylist span {
  float: left;
  font-size: 12px;
  color: #676767;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap;
  width: 230px;
  margin: 0 5px;
}
</style>